<style scoped>
.company>>>.layui-form-select {
    z-index: auto;
}
</style>

<template>
<div class="company">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加互换产品</legend>
    </fieldset>

    <form class="layui-form ">
        <div class="layui-form-item">
            <label class="layui-form-label">分组编码</label>
            <div class="layui-input-block">
                <input type="text" name="groupcode" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-block">
                <select type="text"   name="prodguid" id="prodguid"  lay-filter="products" autocomplete="off" lay-verify="required" class="layui-select" lay-search>
                    <option v-for="item in products" :value="item.guid" :key="item.guid">{{item.productname}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">规格名称</label>
            <div class="layui-input-block">
                <select type="text" name="specguid" id="specguid" lay-filter="specs" autocomplete="off" lay-verify="required" class="layui-select" lay-search>
                    <option v-for="item in specs" :value="item.guid" :key="item.guid">{{item.name}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
            </div>
        </div>
        <div style="height: 200px"></div>
    </form>
</div>
</template>

<script>
let qs = require('qs');
export default {
    name: 'AddInterchangeSpec',
    data() {
        return {
            products: [],
            specs:[]
        }
    },
    mounted() {
        let that = this;
        this.getProducts();
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            form.render();
            form.on('select(products)', function(data){
                that.getSpecs(data.value)
                form.render('select');//select是固定写法 不是选择器
            });
            form.on('submit(submit)', function (data) {
                console.log(data.field)

                let params = {
                    'entity.prodguid': data.field.prodguid,
                    'entity.specguid': data.field.specguid,
                    'entity.groupcode': data.field.groupcode,
                }
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Interchangespec!save.action',
                    data: params,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res.info == "success") {
                            that.toast("添加成功");
                            that.$parent.switchPage('InterchangeSpec');
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
                return false;
            });

        });

    },
    updated() {
        layui.form.render('select');
        layui.form.render();
    },
    methods: {
        getProducts: function () {
            this.$post('/sales/Sellform!findProductinfo.action')
                .then(response => {
                    let data = response.data;
                    if (data.status == 'true') {
                        this.products = data.result;
                    } else {
                        this.toast('获取产品数据失败');
                    }
                });
        },
        getSpecs: function (productid) {
            this.axios({
                method: 'get',
                url: '/produce/Whinapply!getSpeByproduct.action',
                params: {productid: productid}
            }).then((response) => {
                if (response.data.msg == 'success') {
                    let data = response.data;
                    this.specs = data.specifications;
                } else {
                    this.toastError("获取规格数据失败");
                }
            });
        }
    }
}
</script>
